<!--
 * @Author: 王鹏 2911783749@qq.com
 * @Date: 2022-11-07 08:48:50
 * @LastEditors: 王鹏 2911783749@qq.com
 * @LastEditTime: 2022-11-08 15:25:12
 * @FilePath: \vue3Mixiu\code\src\App.vue
 * @Description: 根组件
-->
<script setup lang="ts">
import {watchEffect} from 'vue'
import jwt_decode from 'jwt-decode'
import {userAuth} from './store'
const store = userAuth()
 watchEffect(()=>{
  if(sessionStorage.token){
    const decode=jwt_decode(sessionStorage.token)
    store.setUser(decode)
  }
 })
</script>

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.register,
.login {
  width: 100%;
  height: 100%;
  background: url(./assets/img/bg.jpeg) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.form_container {
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.form_container .form_container_head {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 26px;
  color: #fff;
}
.form_container_body {
  width: 100%;
  background: #fff;
  padding: 20px 40px 5px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 1px #cccc;
}
</style>
